<script setup>
/**
 * 左侧设置栏
 * 用于切换消息、邮件、联系人
 */
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
import { useSetStore } from '@/stores/useSetStore.js'
import weixin from '../../components/svgTemplate/WeiXinSVG.vue'
import mail from '../../components/svgTemplate/MailSVG.vue'
import account from '@/components/svgTemplate/AccountSVG.vue'
import SetSVG from '@/components/svgTemplate/SetSVG.vue'

const userInfoStore = useUserInfoStore()
const leftSetStore = useSetStore()

const changeSet = (index) => {
    leftSetStore.isSet = index
}
</script>

<template>
    <div style="position: relative; height: 100vh; background-color: var(--mygreey); width: 70px">
        <div>
            <img
                :src="userInfoStore.headImgUrl"
                alt=""
            />
            <div style="text-align: center">{{userInfoStore.userName}}</div>
        </div>
        <div class="img-2" @click="changeSet(0)">
            <div v-if="leftSetStore.isSet === 0" class="chooseStyle"></div>
            <weixin class="img-3" :fill="leftSetStore.isSet === 0 ? 'var(--myblue)' : 'black'" />
            <div
                style="position: relative; top: -5px"
                :style="{ color: leftSetStore.isSet === 0 ? 'var(--myblue)' : 'black' }"
            >
                消息
            </div>
        </div>
        <div class="img-2" @click="changeSet(1)">
            <div v-if="leftSetStore.isSet === 1" class="chooseStyle"></div>
            <mail class="img-3" :fill="leftSetStore.isSet === 1 ? 'var(--myblue)' : 'black'" />
            <div
                style="position: relative; top: -5px"
                :style="{ color: leftSetStore.isSet === 1 ? 'var(--myblue)' : 'black' }"
            >
                邮件
            </div>
        </div>
        <div class="img-2" @click="changeSet(2)">
            <div v-if="leftSetStore.isSet === 2" class="chooseStyle"></div>
            <account class="img-3" :fill="leftSetStore.isSet === 2 ? 'var(--myblue)' : 'black'" />
            <div
                style="position: relative; top: -5px"
                :style="{ color: leftSetStore.isSet === 2 ? 'var(--myblue)' : 'black' }"
            >
                联系人
            </div>
        </div>

        <div
            class="img-2"
            style="position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%)"
            @click="changeSet(3)"
        >
            <div v-if="leftSetStore.isSet === 3" class="chooseStyle"></div>
            <SetSVG class="img-3" :fill="leftSetStore.isSet === 3 ? 'var(--myblue)' : 'black'" />
        </div>
    </div>
</template>

<style scoped>
img {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    margin-top: 13px;
    margin-left: 8px;
    margin-right: 8px;
}

.img-2 {
    position: relative;
    margin-top: 16px;
    cursor: pointer;

    .img-3 {
        position: relative;
        z-index: 1;
        display: block;
        margin: 0 auto;
        width: 40px;
        height: 40px;
    }

    div {
        font-size: 12px;
        text-align: center;
    }

    .chooseStyle {
        position: absolute;
        width: 52px;
        height: 52px;
        border-radius: 12px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--mygreey2);
        z-index: 0;
    }
}
</style>
